<template>
	<div class="app">
		<myNavbar title="我邀请的会员" />
		<div class="coupon_choose">
			<div class="coupon_choose-list" @click="swichNav(0)">
				<text :class="[currentTab==0 ? 'coupon_choose_title' : 'coupon_choose_title_no']">潜在客户</text>

				<div class="coupon_choose_line" :class="[currentTab==0 ? 'coupon_choose_line_no' : '']"></div>
			</div>
			<div class="coupon_choose-list" @click="swichNav(1)">
				<text :class="[currentTab==1 ? 'coupon_choose_title' : 'coupon_choose_title_no']">成交客户</text>
				<div class="coupon_choose_line" :class=" [currentTab==1 ? 'coupon_choose_line_no' : '']"></div>
			</div>
		</div>
		<div class="gap"></div>

		<slider :index="currentTab" class="swiper-box" duration="300" style="height:100vh" @change="bindChange">
			<div v-if="myInvitation.length>0&&currentTab==0" class="swiper-item-box">
				<div class="detailed-content">
					<div class="detailed-title-content">
						<div class="vertical"></div>
						<text class="title">潜在客户</text>
					</div>
				</div>
				<list>
					<cell class="detailed-box-content" v-for="item in myInvitation">
						<div style="display:flex;flex-direction: row; justify-content: space-between;width:690px">
							<div style="display:flex;flex-direction: row;">
								<image :src="item.avatar" style="height:100px;width:100px;"></image>
								<div class="detailed-title">
									<text class="detailed-name">{{item.name}}</text>
									<text class="detailed-date">{{item.createDate}}</text>
								</div>
							</div>
							<div class="price-content">
								<div style="display:flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;">
									<text class="price">{{item.vipName}}</text>
								</div>
							</div>
						</div>
					</cell>
				</list>
				<div class="gap"></div>
			</div>
			<div class="coupon-none" v-if="myInvitation.length==0">
				<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
				<div class="coupon-none-text">暂无邀请会员</div>
			</div>
			<div v-if="myInvitation.length>0&&currentTab==1" class="swiper-item-box">
				<div class="detailed-content">
					<div class="detailed-title-content">
						<div class="vertical"></div>
						<text class="title">成交客户</text>
					</div>
				</div>
				<list>
					<cell v-for="item in myInvitation" class="detailed-box-content">
						<div style="display:flex;flex-direction: row; justify-content: space-between;width:690px">
							<div style="display:flex;flex-direction: row;">
								<image :src="item.avatar" style="height:100px;width:100px;"></image>
								<div class="detailed-title">
									<text class="detailed-name">{{item.name}}</text>
									<text class="detailed-date">{{item.createDate}}</text>
								</div>
							</div>
							<div class="price-content">
								<div style="display:flex;flex-direction: row;align-items: flex-end;justify-content: flex-end;">
									<text class="price">{{item.vipName}}</text>
								</div>
							</div>
						</div>
					</cell>
				</list>
				<div class="gap"></div>
			</div>
			<div class="coupon-none" v-if="myInvitation.length==0">
				<image class="coupon-none-image " src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
				<div class="coupon-none-text">暂无邀请会员</div>
			</div>

		</slider>
	</div>
</template>
<script>
	import myNavbar from '../../../../components/myNavbar/myNavbar.vue'
	import {memberList} from '../../../../api/member'
	export default {
		name: '',
		data() {
			return {
				id:'',
				currentTab: 0,
				status: 0,
				mch: {},
				pageNum: 1,
				swiperHeight: '600px',
				myInvitation: [
				]
			}
		},
		created() { // 在实例创建完成后被立即调用
		this.id= app.config.params
		this.loadMember()
		},
		methods: {
			swichNav(data) {
				this.currentTab = data
				this.status=data
				this.loadMember()
			},
			bindChange(e){
				this.currentTab = e.index
				this.status=e.index
				this.loadMember()
			},
			loadMember(){
				memberList({
					memberId:this.id,  
					pageNum:this.pageNum,
					status:this.status
				}).then(res=>{
					this.myInvitation=res.data.data
					this.myInvitation.forEach(item=>{
						item.createDate=this.formatTime(item.createDate)
						if(!item.avatar){
							item.avatar='http://rzico.oss-cn-shenzhen.aliyuncs.com/img/avatar.png'
						}else{
							item.avatar=this.thumbnail(item.avatar,100,100)
						}
					})
				})
			},
		},
		components: {
			myNavbar
		},
	}
</script>

<style scoped>
	/* pages/member//distribution/myInvitation/list.wxss */
	.app {
		flex: 1;
		background-color: rgb(248, 248, 248);
	}

	.coupon_choose {
		/* position: fixed; */
		width: 750px;
		text-align: center;
		padding-left: 26px;
		padding-right: 26px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		height: 76px;
		justify-content: center;
		align-items: center;
		background-color: rgba(248, 248, 248, 1);
		z-index: 100;
		/* opacity: 0.3; */
	}

	.navbar {
		background: rgba(51, 51, 51, 1);
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		position: absolute;
		left: 0;
		padding-right: 100px;
	}

	.nav {
		position: fixed;
		top: 0;
		width: 750px;
		z-index: 999;
	}

	.coupon_choose_title_no {
		font-size: 28px;
		/* height: 60px; */
		font-weight: 500;
		padding-bottom: 5px;
		color: rgba(102, 102, 102, 1);
	}

	.coupon_choose_title {
		font-size: 28px;
		/* height: 60px; */
		font-weight: 500;
		padding-bottom: 5px;
		color: rgba(215, 38, 28, 1);
	}

	.coupon_choose-list {
		width: 375px;
		display: flex;

		height: 76px;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 5px;
	}

	.coupon_choose_line {
		width: 34px;
		height: 6px;
	}

	.coupon_choose_line_no {
		width: 34px;
		height: 6px;
		background-image: linear-gradient(to left, rgb(231, 91, 83), rgb(246, 171, 171));
	}

	.detailed-content {
		padding-top: 20px;
		padding-right: 20px;
		margin-top: 20px;
		background-color: white;
	}

	.detailed-box-content {
		background-color: white;
		padding-left: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 140px;
		border-bottom-width: 2px;
		border-style: solid;
		border-color: rgba(0, 0, 0, 0.1);
	}

	.detailed-title {
		margin-left: 20px;
		width: 300px;
		display: flex;
		flex-direction: column;
		height: 80px;
		justify-content: space-between;
	}

	.detailed-name {
		font-size: 25px;
	}

	.detailed-date {
		font-size: 25px;
		color: #808080;
	}

	.swiper-box {
		display: block;
		width: 750px;
		flex: 1;
		background-color: white;
		margin-top: 20px;
		overflow: hidden;

	}

	.vertical {
		margin-top: 10px;
		height: 30px;
		width: 10px;
		background: linear-gradient(to bottom, #FFFFF0, #FFD39B);
	}

	.title {
		margin-top: 10px;
		font-size: 28px;
		margin-left: 20px;
	}

	.detailed-title-content {
		width: 710px;
		padding-left: 20px;
		display: flex;
		flex-direction: row;
		margin-bottom: 40px;
	}

	.price {
		font-size: 27px;
		color: coral;
	}

	.coupon-none {
		height: 500px;
		justify-content: center;
		align-items: center;
		width: 750px;
	}

	.coupon-none-image {
		text-align: center;
		display: block;
		margin: 0 auto;
		width: 196px;
		height: 131px;
	}

	.coupon-none-text {
		text-align: center;
		letter-spacing: 5px;
		font-size: 28px;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 42px;
		opacity: 0.3;
		margin-top: 30px;
	}
</style>
